<!DOCTYPE html>
<html>
<head>
    <title>详情展示</title>
    {% include 'admin/common/header.html' %}
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
         <div id="score_1" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
        </div>

        <div class="main-container">
             <div class="layui-card-body">
                <table id="dict-records-table" lay-filter="dict-records-table"></table>
            </div>
        </div>

        <div class="main-container">
        <div id="tree" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
        </div>
    </div>

</form>
{% include 'admin/common/footer.html' %}


<script type="text/html" id="police-updateTime">
    {{ '  {{layui.util.toDateString(d.update_at,  "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>

<script>
    layui.use(['table', 'form', 'jquery', 'popup'], function () {
    let table = layui.table
    let form = layui.form
    let $ = layui.jquery
    let popup = layui.popup

    let typeCode

    let cols = [
      [

        { title: '警员id', field: 'police_id', align: 'center' },
          { title: '训练课程id', field: 'class_id', align: 'center' },
        { title: '该次训练评分', field: 'score', align: 'center' },
          { title: '该次训练时间', field: 'update_time', templet: '#police-updateTime', align: 'center' },
        { title: '详情', toolbar: '#dict-type-bar', align: 'center', width: 180 }
      ]
    ]

    table.render({
      elem: '#dict-records-table',
      url: '/admin/police/data2',
      page: true,
      cols: cols,
      skin: 'line',
      height: 'full-148',
      toolbar: '#dict-type-toolbar',
      defaultToolbar: [{
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
      }, 'filter', 'print', 'exports']
    })



    window.refreshType = function () {
      table.reload('dict-records-table')
    }

    table.on('tool(dict-records-table)', function (obj) {

       if (obj.event === 'details') {
        window.detailsType(obj)
      }
    })

      window.detailsType = function (obj) {
      layer.open({
        type: 2,
        title: '展示详情',
        shade: 0.1,
        area: ['100%', '100%'],
        content: '/xxxxxxxxxxxxxxxxxxxxxxxxxx'
      })
    }


    table.on('toolbar(dict-records-table)', function (obj) {
      if (obj.event === 'refresh') {
        window.refreshData()
      }
    })

     form.on('submit(dict-info-query)', function (data) {
      table.reload('dict-records-table', { where: data.field })
      return false
    })




    window.refreshData = function () {
      table.reload('dict-records-table')
    }
  })







layui.use(['layer', 'echarts', 'element', 'count'], function () {
var chartDom = document.getElementById('score_1');
var myChart = echarts.init(chartDom);
var option;

setTimeout(function () {
  option = {
    legend: {},
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      source: [
        ['训练科目', '1月', '2月', '3月', '4月', '5月', '6月'],
        ['情绪采集与评估', 5, 8, 8, 7, 5, 8],
        ['动作规范与评估', 5, 5, 5, 5, 7, 6],
        ['动作响应与评估', 4, 6, 6, 3, 4, 3],
        ['攻防训练与评估', 2, 3, 4, 1, 3, 4]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: { top: '55%' },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@1月} ({d}%)'
        },
        encode: {
          itemName: '训练科目',
          value: '1月',
          tooltip: '1月'
        }
      }
    ]
  };
  myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
  myChart.setOption(option);
});

option && myChart.setOption(option);
})

layui.use(['layer', 'echarts', 'element', 'count'], function () {
   var chartDom = document.getElementById('tree');
var myChart = echarts.init(chartDom);
var option;

myChart.showLoading();
const data = {
  name: '训练科目',
  children: [
    {
      name: '攻防训练与评估',
      children: [
        {
          name: '动作响应配合度',
          children: [
            { name: '动作响应速度' },
            { name: '动作标准程度' }
          ]
        },
        {
          name: '课程',
          value: 3322
        }
      ]
    },
    {
      name: '情绪采集与评估',
      children: [
        { name: '情绪识别程度', value: 8833 },
        { name: '情绪状态', value: 1732 },
        { name: '心理健康', value: 3623 }
      ]
    },
    {
      name: '动作响应与评估',
      children: [{ name: '响应率', value: 4116 }]
    },
    {
      name: '动作规范与评估',
      children: [
        { name: '腿部动作训练', value: 1616 },
        { name: '头部动作训练', value: 1027 },
        { name: '手部动作训练', value: 843 },
        {
          name: '运动指标',
          children: [
            { name: '步长', value: 593 },
            { name: '步行速度', value: 330 },
            { name: '双足支撑时间', value: 287 },
            { name: '步伐不对称', value: 277 },
            { name: '步行稳定性', value: 299 },
          ]
        },
        { name: '动作协调度', value: 843 },
        { name: '四肢配合度', value: 1554 },
        { name: '响应速度', value: 1876 }
      ]
    }

  ]
};
var data2 = {
  name: '突发事件处置',
  children: [
    {
      name: '火灾事件',
      children: [{ name: '定期设备检查', value: 4116 },
                { name: '应急逃生反应', value: 1316 }]
    },
    {
      name: '地震事件',
      children: [
        { name: '紧急救援能力考核', value: 2105 },
        { name: '紧急疏散考核', value: 1316 },
        { name: '急救考核', value: 3151 },
        { name: '使用应急设备能力', value: 3770 },
        { name: '逃生出口熟悉度', value: 4268 }
      ]
    },
    {
      name: '服刑人员逃逸事件',
      children: [{ name: '快速反应能力', value: 8833 }]
    },
    {
      name: '群体斗殴事件',
      children: [{ name: '快速反应能力', value: 4116 }]
    },
      {
      name: '演练可信评估',
      children: [{ name: '演练可信置信度', value: 4116 }]
    }

  ]
};
myChart.hideLoading();
myChart.setOption(
  (option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    legend: {
      top: '2%',
      left: '3%',
      orient: 'vertical',
      data: [
        {
          name: '训练课程序列',
          icon: 'rectangle'
        },
        {
          name: '应急事件处理序列',
          icon: 'rectangle'
        }
      ],
      borderColor: '#c23531'
    },
    series: [
      {
        type: 'tree',
        name: '训练课程序列',
        data: [data],
        top: '5%',
        left: '7%',
        bottom: '2%',
        right: '60%',
        symbolSize: 7,
        label: {
          position: 'left',
          verticalAlign: 'middle',
          align: 'right'
        },
        leaves: {
          label: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left'
          }
        },
        emphasis: {
          focus: 'descendant'
        },
        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750
      },
      {
        type: 'tree',
        name: '应急事件处理序列',
        data: [data2],
        top: '20%',
        left: '60%',
        bottom: '22%',
        right: '18%',
        symbolSize: 7,
        label: {
          position: 'left',
          verticalAlign: 'middle',
          align: 'right'
        },
        leaves: {
          label: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left'
          }
        },
        expandAndCollapse: true,
        emphasis: {
          focus: 'descendant'
        },
        animationDuration: 550,
        animationDurationUpdate: 750
      }
    ]
  })
);

option && myChart.setOption(option);

})




</script>
</body>
</html>